<template>
	<view class="fankui-box">
		<view class="flex-box">
			<view class="label">企业名称：</view>
			<view class="value">{{formData.ownerName}}</view>
		</view>
		<view class="flex-box">
			<view class="label">预警类型：</view>
			<view class="value">{{formData.warningTypeDesc}}</view>
		</view>
		<view class="flex-box">
			<view class="label">预警信息：</view>
			<view class="value">{{formData.warningInfo}}</view>
		</view>
		<view class="flex-box">
			<view class="label">预警时间：</view>
			<view class="value">{{formData.warningTime}}</view>
		</view>
		<view class="flex-box">
			<view class="label">反馈截止时间：</view>
			<view class="value">{{formData.feedbackDeadline}}</view>
		</view>
		<view class="flex-box">
			<view class="label">反馈说明：</view>
			<view class="value">{{formData.feedbackDemand}}</view>
		</view>
		<view class="flex-box">
			<view class="label">反馈时间：</view>
			<view class="value" v-if="buttonShow">
				<uni-datetime-picker class="date-select" type="date" placeholder="选择反馈时间"
					v-model="formData.feedbackDate" />
			</view>
			<view class="value" v-else>{{formData.feedbackDate}}</view>
		</view>
		<view class="flex-box">
			<view class="label">反馈内容：</view>
			<view class="value" v-if="buttonShow">
				<textarea class="textarea" v-model="formData.feedbackExplain"></textarea>
			</view>
			<view class="value" v-else>{{formData.feedbackExplain}}</view>
		</view>
		<view class="button-box" v-if="buttonShow">
			<view class="button-submit" @click="submit">反馈</view>
		</view>
	</view>
</template>

<script>
	import {
		dateFormat
	} from "@/common/util.js";
	export default {
		data() {
			return {
				formData: {
					ownerName: '',
					warningTypeDesc: '',
					warningInfo: '',
					warningTime: '',
					feedbackDemand: '',
					feedbackDate: '',
					feedbackDeadline: '',
					feedbackExplain: '',
					feedbackStatusDesc: '',
				},
				buttonShow: false,
			}
		},
		methods: {
			submit() {
				if (!this.formData.feedbackDate) {
					uni.showToast({
						title: '反馈时间不能为空',
						icon: 'none'
					})
					return false
				}

				if (!this.formData.feedbackExplain) {
					uni.showToast({
						title: '反馈内容不能为空',
						icon: 'none'
					})
					return false
				}
				const data = {
					id: this.formData.id,
					feedbackDate: this.formData.feedbackDate,
					feedbackExplain: this.formData.feedbackExplain,
				}
				
				this.$api.ownerFeedbackSubmit(data).then(() => {
					uni.showToast({
						title: '反馈成功',
						icon: "none",
						success() {
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 上一页 
								uni.navigateBack({
									success: () => {
										beforePage.$vm.getList(true);
									}
								});
							}, 1500); // showToast默认时间
						}
					});
				})
			}
		},
		onLoad(e) {
			const userInfo = this.$store.state.userInfo;
			this.buttonShow = e.feedbackStatusDesc == '待反馈' && userInfo.userRoleType == 2;
			Object.assign(this.formData, e);

			if (this.buttonShow) {
				uni.setNavigationBarTitle({
					title: '反馈'
				});
				this.$nextTick(() => {
					this.formData.feedbackDate = dateFormat(new Date(), 'YYYY-mm-dd')
				})
			} else {
				uni.setNavigationBarTitle({
					title: '详情'
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
	}

	.fankui-box {
		margin: 20rpx;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 20rpx;

		.flex-box {
			display: flex;
			align-items: flex-start;
			font-size: 28rpx;
			line-height: 40rpx;
			padding: 10rpx 0;

			.label {
				color: #666666;
				min-width: 5em;
			}

			.value {
				flex: 1;
				color: #333;
				text-align: justify;

				.textarea {
					width: 100%;
					height: 308rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1px solid #BBBBBB;
					padding: 10rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}

				.date-select ::v-deep {
					.uni-date__x-input {
						height: 60rpx;
					}

					.uni-date-editor--x .uni-date__icon-clear {
						border-width: 8rpx;
					}
				}
			}
		}

		.button-box {
			text-align: center;
			padding: 40rpx 0;

			.button-submit {
				display: inline-block;
				margin: 0 30rpx;
				border-radius: 50rpx;
				padding: 0 80rpx;
				font-size: 32rpx;
				line-height: 84rpx;
				background-color: $app-color;
			}
		}
	}
</style>
